import React from 'react';
import ReactDOM from 'react-dom';
import {InputItem, Toast} from 'antd-mobile';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    componentDidMount() {
        
    }

    onErrorClick = () => {
        if(this.state.hasError) {
            Toast.info('请输入11位手机号码');
        }
    }

    onChange = (value) => {
        // if (value.replace(/\s/g,'').length < 11) {
        //     this.setState({hasError: true})
        // }else {
        //     this.setState({hasError: false})
        // }  
        const obj = {[`${this.props.name}`]: value}
        this.props.callback && this.props.callback(obj,this.props.index);
    }

    onBlur = (value) => {
        const obj = {[`${this.props.name}`]: value}
        this.props.onBlur && this.props.onBlur(obj);
    }

    render() {
        const {type, label, name, value, required,language,disabled,editable,textAlign="left" ,} = this.props;
        let msg = language == 'English' ? 'Required' : `${window.LangMessage.please_input || `请输入`} ${label}`;

        return (
            <div className="line">
                <InputItem
                    style={{textAlign}}
                    disabled={disabled}
                    type={type || 'text'}
                    placeholder={msg}
                    error={this.state.hasError}
                    onErrorClick={this.onErrorClick}
                    onChange={this.onChange}
                    value={value}
                    onBlur={this.onBlur}
                    labelNumber={10}
                    disabled={disabled}
                    editable={editable}
                    required={required}
                >{label}</InputItem>
            </div>
        )
    }
}

export default App;